<template>
	<view class="content">
		<!-- 商品banner -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :autoplay="true" :interval="3000" :indicator-dots="true" :duration="800"
				indicator-active-color="#E63416" :current="current" @change="currentChange">
				<swiper-item class="swiper-item" v-for="(item,index) in itemData.sliderImage" :key="index">
					<image :src="item" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="return-box flex" @click="returnBack">
				<image src="/static/return.png"></image>
			</view>
		</view>
		<!-- 商品名字 -->
		<view class="name-box">
			<view class="name">{{itemData.storeName}}</view>
		</view>
		<!-- <rich-text :nodes="itemData.descriptions"></rich-text> -->
		<!-- 快递 -->
		<view class="express-box flex">
			<text class="title">运费：</text>
			<text class="text">包邮（偏远地区除外）</text>
		</view>
		<!-- 产品介绍 -->
		<view class="introduce-box">产品介绍</view>
		<!-- 详情介绍 -->
		<view class="details-image">
			<view class="itembox" v-for="(item,index) in itemData.descriptions" :key="index">
				<image mode="widthFix" :src="item"></image>
			</view>
		</view>

		<!-- 底部支付 -->
		<view class="bottom-box flex">
			<view class="text-box">
				<view class="title">我的积分：</view>
				<view class="number">{{myPrice}}</view>
			</view>
			<view class="btnbox">
				<view class="btn-box flex">
					<view class="jifenbtn" @click="openCopypassword(2)">{{itemData.price}}积分</view>
					<view class="xianjinbtn" @click="openCopypassword(1)">{{itemData.newPrice}}元</view>
				</view>
			</view>
		</view>

		<!--支付方式弹窗 -->
		<uni-popup ref="showCopypassword" type="bottom" @change="changeCopypassword" @maskClick="closeCopypassword"
			class="pop-box">
			<view class="uni-tip-three">
				<view class="close" @click="closeCopypassword">
					<button class="btny" hover-class="aada"></button>
				</view>
				<view class="shop-box flex">
					<view class="image-box" @click="previewImage">
						<image :src="shopData.image"></image>
					</view>
					<view class="text-box flex">
						<view class="title">{{itemData.storeName}}</view>
						<view class="guige">{{shopData.sku}}</view>
						<view class="price" v-if="payType==1">
							¥{{shopData.newPrice}}</view>
						<view class="price" v-if="payType==2">{{shopData.price}}积分
						</view>
					</view>
				</view>
				<scroll-view class="scroll-box" :scroll-y="true">
					<block v-if="itemData.productAttr">
						<view class="item-box" v-for="(item,index) in itemData.productAttr" :key="index">
							<view class="title">{{item.attrName}}</view>
							<view class="conter flex">
								<view class="item" :class="ited.check?'itemclass item':'item'"
									v-for="(ited,indexed) in item.attrValue" :key="indexed"
									@click="radioChange(index,indexed)">{{ited.attr}}</view>
							</view>
						</view>
					</block>
					<view class="number-box flex">
						<text class="text">购买数量</text>
						<view class="numberbox flex">
							<view class="jian" @click="increase(1)">-</view>
							<!-- <view class="center">{{number}}</view> -->
							<input class="center" type="number" v-model="number" @blur="controlInput" />
							<view class="jian" @click="increase(2)">+</view>
						</view>
					</view>
				</scroll-view>
				<view class="btn-box flex">
					<button class="btn" @click="goOrder">确 定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _this;
	const app = getApp();
	import {
		getCookie,
		setCookie
	} from "@/utils/cookie.js";
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				current: 0, //滑块index
				itemData: {},
				shopId: '', //商品ID
				myPrice: 0,
				number: 1, //商品数量
				endArr: [],
				endString: '', //最终解析的字符串
				shopData: {}, //选中的商品信息
				payType: 1, //支付方式
			};
		},
		onLoad(options) {
			_this = this;
			if (options.data) {
				_this.shopId = options.data;
				_this.getUserInfo();
				_this.getDetails(options.data)
			} else {
				uni.showToast({
					title: '未获取到商品id',
					icon: 'none',
					duration: 2000
				});
			}
		},
		onShow() {},
		methods: {
			returnBack() {
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			currentChange(e) {
				_this.current = e.detail.current;
			},
			// 支付方式弹窗事件
			changeCopypassword(e) {},
			closeCopypassword() {
				this.$nextTick(() => {
					this.$refs['showCopypassword'].close();
				});
			},
			openCopypassword(type) {
				_this.payType = type;
				this.$nextTick(() => {
					this.$refs['showCopypassword'].open();
				});
			},
			getUserInfo() {
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreMember/getUserInfo',
					data: {
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data) {
						_this.myPrice = res.data.balance
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getDetails(id) {
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreProduct/' + id,
					data: {
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data) {
						res.data.newPrice = res.data.priceMoney.toFixed(2)
						res.data.sliderImage = res.data.sliderImage.split(',');
						res.data.descriptions = res.data.descriptions.split(',');
						_this.itemData = res.data;
						_this.itemData.productAttr.forEach((item, inm) => {
							_this.$set(item.attrValue[0], "check", true);
						})
						_this.itemData.productAttr.forEach((item, inm) => {
							_this.endArr[inm] = null;
							item.attrValue.forEach((ten, tenindex) => {
								if (ten.check == true) {
									_this.endArr[inm] = ten.attr;
								}
							})
						})
						_this.endString = _this.endArr.sort().join(',')
						/*满足条件，返回下标位置*/
						let proIndex=_this.itemData.productValue.findIndex((value)=>value.sku==_this.endString);
						if(_this.itemData.productAttr.length>0){
							if (_this.endArr.indexOf(null) == -1) {
								_this.itemData.productValue[proIndex].newPrice = (_this.itemData.productValue[proIndex].priceMoney).toFixed(2)
								_this.itemData.productValue[proIndex].showPrice = _this.itemData.productValue[proIndex].price;
								_this.itemData.productValue[proIndex].showNewPrice = (_this.itemData
									.productValue[proIndex]
									.priceMoney).toFixed(2);
								_this.shopData = _this.itemData.productValue[proIndex];
							}
						}
						else{
							_this.itemData.showPrice = _this.itemData.price;
							_this.itemData.showNewPrice = (_this.itemData.priceMoney).toFixed(2);
							_this.shopData = _this.itemData;
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			radioChange(index, indexed) {
				_this.itemData.productAttr[index].attrValue.forEach((ten, tenindex) => {
					if (ten.check == true) {
						_this.$set(ten, "check", false);
					}
				})
				_this.$set(_this.itemData.productAttr[index].attrValue[indexed], "check", !_this.itemData.productAttr[
					index].attrValue[indexed].check);
				_this.itemData.productAttr.forEach((item, inm) => {
					_this.endArr[inm] = null;
					item.attrValue.forEach((ten, tenindex) => {
						if (ten.check == true) {
							_this.endArr[inm] = ten.attr;
						}
					})
				})
				_this.endString = _this.endArr.sort().join(',')
				/*满足条件，返回下标位置*/
				let proIndex=_this.itemData.productValue.findIndex((value)=>value.sku==_this.endString);
				if (_this.endArr.indexOf(null) == -1) {
					_this.itemData.productValue[proIndex].newPrice = (_this.itemData.productValue[proIndex]
						.priceMoney).toFixed(2)
					_this.itemData.productValue[proIndex].showPrice = _this.itemData.productValue[proIndex]
						.price;
					_this.itemData.productValue[proIndex].showNewPrice = (_this.itemData.productValue[proIndex]
						.priceMoney).toFixed(2);
						if (_this.number > _this.itemData.productValue[proIndex].stock) {
							_this.number = _this.itemData.productValue[proIndex].stock;
							_this.$api.msg('购买数量不能超过库存哦~');
							console.log("aaa")
						}
						if (_this.number < 1) {
							_this.number = 1;
						}
						_this.itemData.productValue[proIndex].showPrice = _this.number * _this.itemData.productValue[proIndex].price;
						_this.itemData.productValue[proIndex].showNewPrice = _this.number * _this.itemData.productValue[proIndex].newPrice;
					_this.shopData = _this.itemData.productValue[proIndex];
				}
			},
			// 预览图片
			previewImage() {
				let images = [];
				images.push(_this.shopData.image);
				uni.previewImage({
					urls: images
				});
			},
			// 数量控制
			increase(type) {
				if (type == 1) {
					if (_this.number <= 1) {
						return;
					}
					_this.number--;
				}
				if (type == 2) {
					if (_this.number >= _this.shopData.stock) {
						_this.$api.msg('购买数量不能超过库存哦~');
						return;
					}
					_this.number++;
				}
				_this.shopData.showPrice = (_this.number * this.shopData.price).toFixed(2);
				_this.shopData.showNewPrice = (_this.number * this.shopData.newPrice).toFixed(2);
			},
			// 控制输入的数量
			controlInput(e) {
				if (e.target.value > _this.shopData.stock) {
					_this.number = _this.shopData.stock;
					_this.$api.msg('购买数量不能超过库存哦~');
				}
				if (e.target.value < 1) {
					_this.number = 1;
				}
				_this.shopData.showPrice = (_this.number * _this.shopData.price).toFixed(2);
				_this.shopData.showNewPrice = (_this.number * _this.shopData.newPrice).toFixed(2);
			},
			goOrder() {
				_this.itemData.productAttr.forEach((item, inm) => {
					_this.endArr[inm] = null;
					item.attrValue.forEach((ten, tenindex) => {
						if (ten.check == true) {
							_this.endArr[inm] = ten.attr;
						}
					})
				})
				if (_this.endArr.indexOf(null) != -1) {
					_this.$api.msg('请选择规格');
					return;
				}
				_this.shopData.shopName = _this.itemData.storeName;
				_this.shopData.shopNumber = _this.number;
				_this.closeCopypassword();
				uni.navigateTo({
					url: `/pages/confirmOrder/confirmOrder?shopData=${JSON.stringify(_this.shopData)}&type=${_this.payType}`
				});

			}
		}
	}
</script>
<style lang="less">
	page {
		width: 100%;
		background: #FBFBFF;
	}
</style>
<style scoped lang="less">
	.uni-tip-three {
		width: 100%;
		background: white;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
		padding: 30rpx 20rpx 130rpx 20rpx;

		.close {
			position: absolute;
			right: 39rpx;
			top: 20rpx;

			.btny {
				width: 35rpx;
				height: 35rpx;
				background: url('~@/static/close.png');
				background-size: 100% 100%;
			}
		}

		.shop-box {
			width: 100%;
			align-items: center;
			justify-content: space-between;

			.image-box {
				width: 130rpx;
				height: 130rpx;

				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 10rpx;
				}
			}

			.text-box {
				width: 100%;
				box-sizing: border-box;
				padding-right: 70rpx;
				margin-left: 15rpx;
				flex-wrap: wrap;

				.title {
					width: 100%;
					font-size: 28rpx;
					color: #000000;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}

				.guige {
					width: 100%;
					font-size: 25rpx;
					color: #B1B1B1;
					margin-top: 10rpx;
				}

				.price {
					width: 100%;
					font-size: 25rpx;
					color: #FF5D5D;
					margin-top: 15rpx;
				}
			}
		}

		.scroll-box {
			width: 100%;
			max-height: 700rpx;
			margin-top: 20rpx;

			.item-box {
				width: 100%;
				margin-top: 20rpx;

				.title {
					width: 100%;
					font-size: 25rpx;
					color: #B1B1B1;
				}

				.conter {
					width: 100%;
					margin-top: 5rpx;
					flex-wrap: wrap;

					.item {
						background: #E8E8E8;
						box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
						border-radius: 5rpx;
						box-sizing: border-box;
						padding: 5rpx 30rpx;
						font-size: 24rpx;
						color: #000000;
						margin-top: 15rpx;
						margin-right: 35rpx;
					}

					.itemclass {
						background: #FFFFFF !important;
						border: 1rpx solid #FF5D5D;
						color: #FF5D5D !important;
					}
				}
			}

			.number-box {
				width: 100%;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				box-sizing: border-box;
				padding-bottom: 40rpx;

				.text {
					font-size: 25rpx;
					color: #B1B1B1;
				}

				.numberbox {
					width: 280rpx;
					align-items: center;
					justify-content: space-between;

					.jian {
						width: 70rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #E8E8E8;
						color: #A8A8A8;
						font-size: 36rpx;
					}

					.center {
						width: 130rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #E8E8E8;
						font-size: 25rpx;
					}
				}
			}
		}

		.btn-box {
			width: 100%;
			background: #FFFFFF;
			position: absolute;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			padding:10rpx 60rpx 30rpx 60rpx;
			align-items: center;

			.btn {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				background: #FFB633;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.explain-box {
			width: 100%;

			.niono {
				width: 100%;
				margin-top: 40rpx;
				display: flex;
				justify-content: center;

				.hhjj {
					width: 165rpx;
					height: 165rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 159rpx;
						height: 148rpx;
					}
				}
			}
		}
	}

	.content {
		width: 100%;

		.uni-margin-wrap {
			width: 100%;
			position: relative;
			height: 760rpx;

			.return-box {
				width: 50rpx;
				height: 50rpx;
				background: rgba(208, 175, 137, 0.6);
				border-radius: 50%;
				position: fixed;
				left: 30rpx;
				top: 70rpx;
				z-index: 10;
				align-items: center;
				justify-content: center;

				image {
					width: 16rpx;
					height: 31rpx;
					margin-left: -5rpx;
					z-index: 10;
				}
			}

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.diji {
				position: absolute;
				bottom: 26rpx;
				right: 37rpx;
				box-sizing: border-box;
				padding: 5rpx 10rpx;
				line-height: 29rpx;
				background: #7C7C7C;
				border-radius: 17rpx;
				text-align: center;
				z-index: 3;
				font-size: 24rpx;
				font-family: SimHei;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.name-box {
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 25rpx;
			background: #FFFFFF;

			.name {
				width: 100%;
				font-size: 28rpx;
				font-weight: bold;
				color: #000000;
				line-height: 36rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}

		.express-box {
			width: 100%;
			height: 85rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			box-sizing: border-box;
			padding: 0 25rpx;
			align-items: center;

			.title {
				font-size: 28rpx;
				color: #B1B1B1;
			}

			.text {
				font-size: 28rpx;
				color: #000000;
				margin-left: 15rpx;
			}
		}

		.introduce-box {
			width: 100%;
			height: 110rpx;
			line-height: 100rpx;
			background: #FFFFFF;
			text-align: center;
			font-size: 28rpx;
			color: #010101;
			margin-top: 22rpx;
		}

		.details-image {
			width: 100%;
			box-sizing: border-box;
			padding-bottom: 110rpx;

			.itembox {
				width: 100%;
				margin-top: -10rpx;

				image {
					width: 100%;
					height: auto;
				}
			}
		}

		.bottom-box {
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			padding: 0 0 0 30rpx;

			.text-box {
				width: 100%;
				box-sizing: border-box;

				.title {
					width: 100%;
					font-size: 24rpx;
					color: #B1B1B1;
				}

				.number {
					width: 100%;
					font-size: 26rpx;
					color: #FF5D5D;
					margin-top: 5rpx;
					font-weight: bold;
				}
			}

			.btnbox {
				width: 365rpx;
				margin-left: 20rpx;

				.btn-box {
					width: 365rpx;
					height: 100rpx;

					.jifenbtn {
						width: 50%;
						height: 100rpx;
						line-height: 100rpx;
						text-align: center;
						background: #FF9A40;
						font-size: 25rpx;
						color: #FFFFFF;
					}

					.xianjinbtn {
						width: 50%;
						height: 100rpx;
						background: #FFB633;
						line-height: 100rpx;
						text-align: center;
						font-size: 25rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
